<template>
  <div>
    <div class="user-hander">
      <h4>用户管理</h4>
      <div>
        <el-button 
        type="success" 
        size="mini"
        @click="handleAdd"
        icon="el-icon-circle-plus-outline">
        新建用户</el-button>
        <el-button  
        size="mini" 
        icon="el-icon-refresh-left" 
        @click="userRefresh">刷新</el-button>
      </div>
    </div>
    <el-table
    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    border
    style="width: 100%">
    <el-table-column
      label="ID"
      prop="id"
      width="60">
    </el-table-column>
    <el-table-column
      label="账号类型"
      prop="identity"
      width="80">
      <template slot-scope="scope">
        <el-tag 
          :type="scope.row.identity === '管理员' ? 'primary' : 'success'"
          disable-transitions>
            <p>{{scope.row.identity}}</p>
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column
      label="用户名"
      prop="name"
      width="140">
    </el-table-column>
    <el-table-column
      label="性别"
      prop="sex"
      width="100">
      <template slot-scope="scope">
        <el-tag
        effect="plain"
        :type="scope.row.sex === '男' ? 'primary' : 'danger'">
          <i :class="scope.row.sex === '男'? 'el-icon-male' : 'el-icon-female'"
          >{{scope.row.sex}}</i>
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column
      label="账号"
      prop="username">
    </el-table-column>
    <el-table-column
      label="密码"
      prop="password">
    </el-table-column>
    <el-table-column
      label="电话号码"
      prop="phoneNumber">
    </el-table-column>
    <el-table-column
      label="账号状态"
      prop="status">
      <template  slot-scope="scope">
        <el-switch
          style="display: block"
          :value="scope.row.status === 1 ? true : false"
          active-text="正常"
          inactive-text="禁用"
          @change="setUserStatues(scope.row.id)">
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header">
        <el-input
          v-model="search"
          size="mini"
          placeholder="请输入用户名关键字">
          <i slot="prefix" class="el-input__icon el-icon-search"/>
          </el-input>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-edit"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          icon="el-icon-remove-outline"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination
    @current-change="changePage"
    :page-size="10"
    :page-count="11"
    layout="prev, pager, next"
    :total=total>
  </el-pagination>
  <!-- 新建用户对话框 -->
  <el-dialog
  title="新建用户"
  :visible.sync="adduserVisible"
  width="30%"
  :before-close="handleClose">
  <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="用户名"
  :rules="[{ type: 'String', message: '请输入字符串类型' }]">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="性别">
    <el-radio-group v-model="form.sex">
      <el-radio label="男"></el-radio>
      <el-radio label="女"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="账号">
    <el-input v-model="form.username"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input v-model="form.password"></el-input>
  </el-form-item>
  <el-form-item
  prop="phoneNumber" 
  label="电话号码">
    <el-input v-model="form.phoneNumber"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit(form)">新建</el-button>
    <el-button @click="adduserVisible = false">取消</el-button>
  </el-form-item>
</el-form>
  </el-dialog>
  <!-- 用户修改对话框 -->
  <el-dialog
  title="修改用户"
  :visible.sync="edituserVisible"
  width="30%"
  :before-close="handleClose">
  <el-form ref="editform" :model="editform" label-width="80px">
    <el-form-item label="用户ID">
    <p>{{editform.id}}</p>
  </el-form-item>
  <el-form-item label="用户名">
    <el-input v-model="editform.name"></el-input>
  </el-form-item>
  <el-form-item label="性别">
    <el-radio-group v-model="editform.sex">
      <el-radio label="男"></el-radio>
      <el-radio label="女"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="账号">
    <el-input v-model="editform.username"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input v-model="editform.password"></el-input>
  </el-form-item>
  <el-form-item
  prop="phoneNumber" 
  label="电话号码">
    <el-input v-model="editform.phoneNumber"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onEdit(editform)">修改</el-button>
    <el-button @click="edituserVisible=false">取消</el-button>
  </el-form-item>
</el-form>
  </el-dialog>
<!-- 删除用户对话框 -->
<el-dialog
  title="提示"
  :visible.sync="centerDialogVisible"
  width="30%"
  center>
  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import Axios from 'axios';
  export default {
    data() {
      return {
        //用户数据list
        tableData: [],
        //表头查询关键字
        search: '',
        //页码
        page:1,
        //数据总数
        total:20,
        //表单数据
        form: {
          name:'',
          username:'',
          password:'',
          sex:'男',
          phoneNumber:''
        },
        editform: {
          id:'1',
          name:'',
          username:'',
          password:'',
          sex:'男',
          phoneNumber:''
        },
        //弹出框 Boolean
        adduserVisible:false,
        edituserVisible:false,
        centerDialogVisible:false
      }
    },
    created(){
        this.getUserList()
    },
    methods: {
      //新增用户
      handleAdd(){
        this.adduserVisible = true;
      },
      //编辑行
      handleEdit(index, row) {
        this.edituserVisible=true
        console.log(index, row);
        this.selectUserById(row.id)
      },
      //删除行
      handleDelete(index, row) {
        console.log(index, row);
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delUserById(row);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      //新增用户表单提交
      onSubmit(form) {
        console.log(form);
        Axios({
            url:"http://localhost:8080/user/",
            method:'post',
            data:{
                name:form.name,
                sex:form.sex,
                username:form.username,
                password:form.password,
                phoneNumber:form.phoneNumber
            }
        })
        .then(res=>{
            console.log(res)
            if(res.data.code==1){
              this.$message({
                type: 'success',
                message: '创建用户成功'
          });     
          }else{
            this.$message.error({
                message: res.data.msg
          });
          return;  
          }
          this.form=[]
          this.adduserVisible=false
          this.getUserList()
        })
        .catch(err=>{
            console.log(err)
        })
      },
      //修改用户表单提交
      onEdit(form){
      console.log('修改用户表单',form)
      Axios({
            url:"http://localhost:8080/user/",
            method:'put',
            data:{
                id:form.id,
                name:form.name,
                sex:form.sex,
                username:form.username,
                password:form.password,
                phoneNumber:form.phoneNumber
            }
        })
        .then(res=>{
            console.log(res)
            if(res.data.code==1){
              this.$message({
                type: 'success',
                message: '修改用户成功'
          });     
          }else{
            this.$message.error({
                message: res.data.msg
          });
          return;  
          }
          this.form=[]
          this.edituserVisible=false
          this.getUserList()
        })
        .catch(err=>{
            console.log(err)
        })
      },
      //加载页面
      openFullScreen() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading'
        });
        setTimeout(() => {
          loading.close();
        }, 1000);
      },
      //刷新页面
      userRefresh(){
        this.search=""
        this.getUserList()
      },
      // 请求用户信息
      getUserList(){
        this.openFullScreen()
        Axios.get("http://localhost:8080/user/"+this.page+"/10")
        .then((res)=>{
           console.log(res.data.data.list) 
           this.tableData=res.data.data.list
           this.total=res.data.data.total
        })
        .catch((err)=>{
            console.log(err)
        });
      },
      //删除用户请求
      delUserById(row){
        Axios.delete("http://localhost:8080/user/"+row.id)
        .then((res)=>{
          console.log(res)
          if(res.data.code==0){
            this.$message.error({
              message:res.data.msg
            })
            return
          }
          this.$message({
          message: '删除成功',
          type: 'success'
        });
          this.getUserList()
        })
        .catch((err)=>{
          this.$message.error({
          message: '删除失败'
        });
        console.log(err)
        })
      },
      //分页点击时间
      changePage(e){
        console.log("切换到页数"+e)
        this.page=e;
        this.getUserList()
      },
      //用户状态修改点击事件
      setUserStatues(id){
        console.log(id)
        Axios.put("http://localhost:8080/user/"+id)
        .then(res=>{
            this.$message({
              message:"账号:"+id+"\t状态修改成功",
              type:"success"
            })
            this.getUserList()
        })
        .catch(err=>{
          this.$message.error({
            message:err
          })
        })
      },
      selectUserById(id){
      Axios.get("http://localhost:8080/user/"+id)
      .then(res=>{
        console.log(res)
        this.editform=res.data
      })
      .catch(err=>{
          this.$message.error({
            message:err
          })
      })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    },
  }
</script>

<style>
.user-hander{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.el-pagination{
  text-align: left;
  background-color: white;
}
</style>